<template>
  <div>
    <h2>员工详情</h2>
    <el-row style="width: 300px; margin: 20px 0; display: flex">
      <el-button type="success" @click="dialogVisible = true"
        >添加员工</el-button
      >
      <el-button type="danger" @click="deletes">批量删除</el-button>
    </el-row>
    <el-card>
      <el-table
        :data="staffdetails"
        border
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="time" label="创建时间" align="center">
        </el-table-column>
        <el-table-column prop="jobnumber" label="工号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
        </el-table-column>
        <el-table-column prop="position" label="职位" align="center">
        </el-table-column>
        <el-table-column prop="quit" label="是否离职" align="center">
          <template slot-scope="{ row }">
            <el-switch v-model="row.quit"> </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" label-width="100px">
        <el-form-item label="工号" prop="jobnumber">
          <el-input v-model="ruleForm.jobnumber"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio v-model="ruleForm.sex" label="1">男</el-radio>
          <el-radio v-model="ruleForm.sex" label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="职位" prop="position">
          <el-input v-model="ruleForm.position"></el-input>
        </el-form-item>
        <el-form-item label="是否离职" prop="quit">
          <el-radio v-model="ruleForm.quit" label="1">是</el-radio>
          <el-radio v-model="ruleForm.quit" label="2">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addyg()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getemployeesAPI, addemAPI, deleteempAPI } from "@/api/user";
import addstaff from "./components/addstaff.vue";
import { Message } from "element-ui";
export default {
  components: { addstaff },
  data() {
    return {
      staffdetails: [],
      page: 0,
      value: true,
      dialogVisible: false,
      ruleForm: {
        jobnumber: "",
        name: "",
        sex: "",
        position: "",
        quit: "",
      },
    };
  },
  created() {
    this.getemployeeslist();
  },
  methods: {
    // 获取员工详情
    async getemployeeslist() {
      let res = await getemployeesAPI({ page: 0 });
      console.log(res, "getemployeeslist");
      this.staffdetails = res.data.data.result;
    },
    // 添加员工
    async addyg() {
      if (
        this.ruleForm.jobnumber == "" ||
        this.ruleForm.name == "" ||
        this.ruleForm.sex == "" ||
        this.ruleForm.position == "" ||
        this.ruleForm.quit == ""
      ) {
        return false;
      } else {
        addemAPI({
          jobnumber: this.ruleForm.jobnumber,
          name: this.ruleForm.name,
          sex: this.ruleForm.sex,
          position: this.ruleForm.position,
          quit: this.ruleForm.quit,
        }).then((res) => {
          if (res.status == 200) {
            this.getemployeeslist();
            Message.success(res.data.msg);
            this.dialogVisible = false;
          }
        });
      }
    },
    // 删除员工
    selectionChange(val) {
      // 表格选项发生变化
      console.log("触发表格事件");
      this.selectionList = [];
      val.forEach((element) => {
        this.selectionList.push(element.id);
      });
    },
    // 批量删除
    deletes() {
      this.selectionDatas = [];
      var arr = [];
      var data = this.$refs.multipleTable.selection;
      data.forEach(function (item) {
        arr.push(item.name);
      });
      console.log(arr, "测试选中arr");
      request
        .delete(apis.manageModel, arr)
        .then(function (response) {
          if (response.data.code == 200) {
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped></style>
